/<template>
  <div id="class">
    <div class="zuo" @click="dian">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="热门推荐" />
        <van-sidebar-item title="鲜花" />
        <van-sidebar-item title="永生花" />
        <van-sidebar-item title="蛋糕" />
      </van-sidebar>
    </div>
    <div class="you">
      <van-grid :border="false" :column-num="3">
        <van-grid-item v-for="(item, index) in list" :key="index">
          <img class="imgs" :src="item.img" />
          <p>{{ item.title }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import axios from "@/utils/My_axios";
import Vue from "vue";
import { Sidebar, SidebarItem, Grid, GridItem } from "vant";
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      activeKey: 0,
      arr: [],
      list: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      axios.get("/get_class_arr").then((res) => {
        this.arr = res.data.arr;
        this.list = res.data.arr[0].list;
      });
    },
    dian() {
      this.list = this.arr[this.activeKey].list;
    },
  },
};
</script>

<style lang="scss" scoped>
.zuo {
  width: 90px;
}
.van-sidebar {
  width: 90px;
}
#class {
  width: 100%;
  height: 100%;
  display: flex;
}
.imgs {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>